<template>
  <view class="p-center-st">
    <TopBar :options="optionTopBar"></TopBar>
    <login-bar></login-bar>
    <view class="my-center">
      <view class="top-bg">
        <view class="header">
          <view class="avater-box" @click="gotoPage('/user/editData')">
            <img :src="$countImgUrl(personaOption.face || '/img/2YRDV5ASYQOP0PI864BYZ1651137572615.png')" class="img">
            <view class="edit">
              <img src="https://img.qumoyugo.com/img/C46WS5BDX5CHH75F6XER1716967073631.png" style="width:100%;height:100%">
            </view>
          </view>
          <view style="padding-left: 22rpx; flex:1">
            <view class="name">
              {{personaOption.nickname}}
              <img :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_sex_new_${personaOption.sex}.png`" style="width: 24rpx;height:24rpx" v-if="personaOption.sex">
            </view>
            <view style="font-size: 22rpx;" v-if="personaOption.face">ID:{{customerId}}</view>
          </view>
        </view>
      </view>
      <!--订单中心-->
      <view class="order">
        <view class="title">订单中心</view>
        <view style="display: flex;justify-content: space-between; margin: 40rpx 14rpx 0 14rpx">
          <view class="tab" v-for="nav in navList" :key="nav.status" @click="gotoPage(nav.url || `/user/order/index?orderStatus=${nav.status}`)">
            <image class="order-image" :src="`https://img.qumoyugo.com/webimgbg/picopino_order_status_${nav.status}.png`"></image>
            <view class="order-text">{{nav.name}}</view>
            <view class="number" v-if="orderNumber[nav.key]">{{orderNumber[nav.key]}}</view>
          </view>
        </view>
      </view>
      <!--更多服务-->
      <view class="more">
        <view class="title" style="margin:0 30rpx">更多</view>
        <view style="display: flex;flex-wrap: wrap;">
          <view class="more-card" v-for="more in moreListData" :key="more.type" @click="gotoPage(more.url)">
            <template v-if="!more.url">
              <button style="background: rgba(0, 0, 0, 0);padding:0;line-height: inherit;" open-type="contact">
                <image class="card-image" :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_more_ps-h${more.type}.png`"></image>
                <view class="card-text">{{more.name}}</view>
              </button>
            </template>
            <template v-else>
              <image class="card-image" :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_more_ps-h${more.type}.png`"></image>
              <view class="card-text">{{more.name}}</view>
              <view class="tips-img" v-if="more.tips"></view>
            </template>
          </view>
        </view>
      </view>
      <!-- 补充更多资料 -->
      <view class="more-zl" v-if="isShowMaterial">
        <view>修改为自己的头像，让活动们更了解你吧～</view>
        <view @click="gotoPage('/user/editData')" class="btn">去完善</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import TopBar from '@/components/navBar/topBar'
import { onShow, onPageScroll } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import { storage } from '@/utils/utils'
import { TOKEN } from '@/assets/js/config.js'
const { $https, $countImgUrl } = getCurrentInstance().appContext.config.globalProperties
// 用户主要信息
const personaOption = ref({})
const isShowMaterial = ref(false)
const navList = ref([
  { name: '全部', num: 0, status: 0, key: 'allNum' },
  { name: '待付款', num: 0, status: 1, key: 'unPayNum' },
  { name: '已付款', num: 0, status: 2 },
  { name: '待评价', num: 0, status: 5, key: 'unEvaluateNum' },
  { name: '退款', num: 0, status: 6, url: '/user/order/refundOrder' }
])
const store = useStore()
const customerId = computed(() => {
  return store.state.profile?.attr?.customerId
})
// 小饼干
const cookie = ref({
  num: 0
})
const orderNumber = ref({})
const optionTopBar = ref({
  title: '',
  backgroundColor: 'transparent'
})
const moreListData = ref([
  { url: '/user/setting', name: '设置', type: 1 },
  // { url: '/user/editData', name: '我的资料', type: 2 },
  // { url: '/user/activity', name: '任务中心', type: 3 },
  { url: '/user/friend', name: '邀请有礼', type: 4, tips: true },
  { url: '/user/coupon?type=1', name: '优惠券', type: 5 },
  { url: '/user/getCoupon', name: '领券中心', type: 6 },
  { url: '', name: '联系我们', type: 7 }
  // { url: '/user/blacklist', name: '黑名单', type: 8 },
  // { url: '/user/commonPersonPet', name: '参与信息', type: 9 }
])
onPageScroll((e) => {
  const opacity = Math.min(40, e.scrollTop)
  optionTopBar.value = {
    title: (opacity / 40) > 0.7 ? '我的' : '',
    backgroundColor: `rgba(255,255,255,${opacity / 40})`
  }
})
onShow(() => {
  $https({
    url: '/personal/data',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      if (res.data.nickname) {
        personaOption.value = res.data
        isShowMaterial.value = res.data.isCompleted === 0
        getOrderNumer()
      } else {
        personaOption.value = {}
        orderNumber.value = 0
        cookie.value = {
          num: 0
        }
      }
    }
  })
})

// 订单数量
const getOrderNumer = () => {
  $https({
    url: '/app/order/todo/num',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      orderNumber.value = res.data
    }
  })
}
// 页面跳转
const gotoPage = (url) => {
  if (!storage.get(TOKEN)) {
    uni.navigateTo({
      url: `/pages/login?redirect=${encodeURIComponent('/pages/personal')}`
    })
  } else {
    uni.navigateTo({
      url
    })
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.p-center-st{
  overflow: hidden;
  min-height: 100vh;
  background: #FFF8F0;
  padding: 0 20rpx 60rpx 20rpx;
}
.my-center{
  padding-top: 65rpx;
  .header {
    padding-left: 20rpx;
    padding-bottom: 15rpx;
    display: flex;
    align-items: center;
    color: #737373;
    .img {
      width: 110rpx;
      height: 110rpx;
      border:1px solid #ffffff;
      border-radius: 50%;
    }
    .name {
      font-size: 32rpx;
      line-height: 34rpx;
      font-weight: bold;
      margin-bottom: 14rpx;
      color: #414141;
    }
    .tips {
      height: 24rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      line-height: 11rpx;
    }
    .tips-num {
      margin-left: 12rpx;
      height: 19rpx;
      font-size: 25rpx;
      font-weight: 600;
      color: #EE751E;
      line-height: 11rpx;
    }
    .btn-zlju {
      width: 150rpx;
      height: 50rpx;
      border-radius: 100rpx;
      border: 1rpx solid #979797;
      line-height: 46rpx;
      text-align: center;
      color: #333333;
      font-size: 24rpx;
      margin-bottom: 50rpx;
    }
  }
  .avater-box{
    position: relative;
    width: 110rpx;
    height: 110rpx;
    .edit{
      position: absolute;
      width: 36rpx;
      height: 36rpx;
      bottom: 0;
      left: 0;
    }
  }
  .wt-bg{
    background: #fff;
    border-radius: 20rpx;
    margin-top: 42rpx;
    display: flex;
    margin-bottom: 20rpx;
    padding: 50rpx 0;
  }
  .count-info {
    color: #000;
    font-size: 34rpx;
    line-height: 34rpx;
    position: relative;
    text-align: center;
    &:not(:first-child)::before{
      @include border(left, #E1E1E1)
    }
    .count-name {
      color: #737373;
      font-size: 22rpx;
      margin-top: 10rpx;
      font-weight: normal;
    }
  }
  .order {
    margin-bottom: 20rpx;
    height: 270rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    .tab {
      width: 72rpx;
      text-align: center;
      font-size: 0;
      position: relative;
      .number{
        width: 18px;
        height: 18px;
        border: 1px solid #fff;
        background: #F53F3F;
        font-size: 10px;
        color: #fff;
        position: absolute;
        top: -8px;
        right: -10px;
        border-radius: 50%;
        line-height: 16px;
        text-align: center;
      }
    }
  }
  .more {
    margin-top: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx 0;
    .more-card {
      width: 114rpx;
      text-align: center;
      margin: 44rpx 30rpx 0 30rpx;
      position: relative;
    }
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #000;
    padding-bottom: 20rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    &::after{
      @include border(bottom, #E1E1E1)
    }
  }
  .order-image {
    width: 62rpx;
    height: 62rpx;
  }
  .order-text {
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #414141;
    line-height: 26rpx;
    text-align: center;
  }
  .card-image {
    width: 83rpx;
    height: 83rpx;
  }
  .tips-img{
    background: url(https://img.qumoyugo.com/webimgbg/picopino_tips_prize_person_center.png) no-repeat;
    background-size: 100%;
    width: 72rpx;
    height: 38rpx;
    position: absolute;
    left: 0;
    top: -24rpx;
    animation: move 2s infinite;
  }
  .card-text {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #333333;
    line-height: 24rpx;
    text-align: center;
  }
}
.popup-content {
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  height: 220rpx;
  background-color: #fff;
}
.more-zl{
  position: fixed;
  bottom: 10rpx;
  height: 74rpx;
  font-size: 24rpx;
  background: #C9E7E6;
  display: flex;
  padding: 0 20rpx;
  left: 40rpx;
  right: 40rpx;
  justify-content: space-between;
  font-weight: bold;
  align-items: center;
  border-radius: 10rpx;
  .btn{
    background: url(https://img.qumoyugo.com/webimgbg/picopino_icon_circle_ziliao_user.png) no-repeat;
    background-size: 100%;
    width: 144rpx;
    height: 58rpx;
    text-align: center;
    line-height: 54rpx;
  }
}
:deep(.uni-border-left) {
  display: none;
}
.tags-box{
  display: flex;
  flex-wrap: wrap;
  height: 38rpx;
  overflow: hidden;
  .alone{
    padding: 8rpx 14rpx;
    border-radius: 8rpx;
    margin-right: 10rpx;
    background: rgba(201, 231, 230, 0.60);
    color: #000;
    font-size: 22rpx;
    line-height: 22rpx;
  }
}
:deep(.uni-popup) {
  z-index: 999 ;
}
@keyframes move {
  0% {
    top: -24rpx;
  }
  50% {
    top: -20rpx;
  }
  100% {
    top: -24rpx;
  }
}
</style>
